<template>
	<view class="ys">
		<view class="header">
			<view class="input-box">
				<input placeholder="默认关键字" v-model="name" placeholder-style="color:#777;" confirm-type="search"
					@confirm="doSearch" />
				<uni-icons type="search" color="#777" size="20"></uni-icons>
			</view>
		</view>
		<!-- 占位 -->
		<view class="place">
			<view class="" v-if="name != ''">
				搜索商品:{{name}}
			</view>
		</view>
		<!-- 商品列表 -->
		<view class="goods-list">
			<view class="product-list">
				<view class="product" v-for="(goods) in goodsList" :key="goods.id" @tap="toGoods(goods)">
					<image :src="goods.cover_path"></image>
					<view class="infobox">
						<view class="name">{{goods.name}}</view>
						<view class="desc">{{goods.sketch}}</view>
						<view class="price">
							<view class="pricenum">￥{{goods.price}}</view>
							<view class="sell">已售:{{goods.sales}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="loading-text" v-show="flag">{{ loadingText }}</view>
		</view>
	</view>
</template>

<script>
	import {
		GoodsSearch
	} from "@/api/api.js"
	export default {
		data() {
			return {
				goodsList: [],
				loadingText: "搜索中...",
				headerTop: "0px",
				headerPosition: "fixed",
				page: 1,
				flag: false,
				name: '',
				last_page: 1
			};
		},
		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
			// #ifdef APP-PLUS
			this.headerTop = '0'
			// #endif
			// #ifdef H5
			this.headerTop = '44px'
			// #endif
		},
		onReachBottom() {
			if (this.page < this.last_page) {
				this.page++
				this.doSearch()
			}
		},
		methods: {
			//商品跳转
			toGoods(e) {
				uni.navigateTo({
					url: '/pages/goodsdetail/index?id=' + e.id
				});
			},
			doSearch(e) {
				var name = e.detail.value.trim()
				if (name == '') {
					return false
				}
				this.flag = true
				this.loadingText = '搜索中...';
				this.goodsList = [];
				GoodsSearch({
					name: name,
					page: this.page
				}).then(res => {
					if (res.code == 0) {
						this.goodsList = this.goodsList.concat(res.data.data)
						this.flag = false
						this.last_page = res.data.last_page
					} else {
						this.flag = true
						this.loadingText = res.message;
					}
				})
			}
		}

	}
</script>

<style lang="scss">
	.ys {
		height: 100%;
		min-height: 100vh;
		/* #ifdef H5 */
		min-height: calc(100vh - 44px);
		/* #endif */
		box-sizing: border-box;
		position: relative;
		background-color: #050B18;
		max-width: 500px;

	}

	.icon {
		font-size: 26upx;
	}

	.input-box {
		width: 95%;
		height: 60upx;
		background: rgba(143, 124, 91, 0.2);
		border-radius: 10upx;
		position: relative;
		display: flex;
		align-items: center;
		margin: 0 auto;

		input {
			padding-left: 28upx;
			height: 28upx;
			font-size: 28upx;
			width: 85%;
			color: rgba(255, 255, 255, 0.4);
		}
	}

	.header {
		padding: 10px 0;
	}

	.place {
		width: 100%;
		display: flex;
		padding-left: 15px;
		align-items: center;
		color: rgba(255, 255, 255, 0.4);
		font-size: 12px;
		// background: #212327;
		height: 90upx;

	}

	.goods-list {
		.loading-text {
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 60upx;
			color: #979797;
			font-size: 24upx;
		}

		.product-list {
			width: 92%;
			padding: 0 4% 3vw 4%;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;

			.product {
				display: flex;
				width: 100%;
				margin-bottom: 10px;
				border-bottom: 1px solid #212327;
				align-items: center;
				position: relative;
				padding: 5px;
				padding-bottom: 15px;
				box-sizing: border-box;

				image {
					width: 88px;
					height: 88px;
				}

				.infobox {
					padding: 3px;
					width: calc(100% - 88px);
					height: 88px;
					padding-left: 10px;
					box-sizing: border-box;

				}

				.name {
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					overflow: hidden;
					font-size: 14px;
					color: #fff;
				}

				.desc {
					display: -webkit-box;
					-webkit-line-clamp: 1;
					-webkit-box-orient: vertical;
					overflow: hidden;
					font-size: 12px;
					height: 36px;
					line-height: 18px;
					color: rgba(140, 140, 140, 0.9);
					margin-top: 5px;
				}

				.price {
					font-size: 12px;
					color: #777;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.sell {
						transform: scale(.8);
					}

					.pricenum {
						color: #FFD256;
						font-size: 18px;
						font-weight: bold;
					}
				}
			}

		}
	}
</style>